<template>
  <div class="ZLCategory">
    <!-- 标题 -->
    <nav-bar class="topNav">
      <div slot="navCenter">商品分类</div>
    </nav-bar>
    <div class="cateContent">
      <!-- 左侧导航展示 -->
      <cate-leftnav :leftNavArr="leftNavArr" @handleLeftNav="handleLeftNav"></cate-leftnav>
      <div class="contentRight">
        <!-- 右侧上部的图片展示 -->
        <category-top :categoryTopimgList="categoryTopimgList"></category-top>
        <!-- tab切换栏 -->
        <tab-control :titles="titles" @getIndex="getIndex"></tab-control>
        <!-- 商品列表展示 -->
        <goods-list :goodsList="categoryControlList"></goods-list>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/context/tabcontrol/TabControl";
import GoodsList from "components/context/goods/GoodsList";

import CateLeftnav from "./childcomps/CateLeftnav";
import CategoryTop from "./childcomps/CategoryTop";

import {
  getCategoryDate,
  getCategoryTopImg,
  getCategoryBottomList
} from "networks/category";
export default {
  name: "Category",
  components: {
    NavBar,
    TabControl,
    GoodsList,
    CateLeftnav,
    CategoryTop
  },
  data() {
    return {
      titles: ["综合", "新品", "销量"],
      leftNavArr: [],
      leftNavDataList: {},
      leftCurrentIndex: -1, //记录左侧导航当前被点击的下标
      TabControlItem: "pop"
    };
  },
  computed: {
    // 用计算属性监听leftNavDataList的变化。将结果给到category-top组件。
    categoryTopimgList() {
			if (this.leftCurrentIndex == -1) return [];
			// console.dir(this.leftNavDataList[this.leftCurrentIndex].subTopImgList)
      return this.leftNavDataList[this.leftCurrentIndex].subTopImgList;
    },
    categoryControlList() {
      if (this.leftCurrentIndex === -1) return [];
      return this.leftNavDataList[this.leftCurrentIndex].subControlList[
        this.TabControlItem
      ];
    }
  },
  methods: {
    // 获取左侧导航数据的方法
    _getCategoryDate() {
      let _self = this;
      getCategoryDate()
        .then(result => {
          _self.leftNavArr = result.data.category.list;
          // 在这里初始化左侧导航每个item的子数据，数据类型为leftNavData[i]={subcategories:{},categoryDetail:{pop:[],sell:[],news:[]}}
          for (let i = 0; i < _self.leftNavArr.length; i++) {
            _self.leftNavDataList[i] = {
              subTopImgList: [],
              subControlList: {
                pop: [],
                sell: [],
                new: []
              }
            };
          }
          // console.log(_self.leftNavArr);
          // 刚进页面默认请求第一行的数据来展示
          _self._getCategoryTopImg(0);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取内容中右侧上的图片
    _getCategoryTopImg(index) {
      let _self = this;
      _self.leftCurrentIndex = index;
      // 这个index是用于确定左侧导航的哪一个。确定后再获取对应的maitKey
      const maitKey = _self.leftNavArr[index].maitKey;
      // console.log(maitKey);
      getCategoryTopImg(maitKey).then(res => {
        // console.log(res);
        _self.leftNavDataList[index].subTopImgList = res.data.list;
        //重要的一笔。待解析
        _self.leftNavDataList = { ..._self.leftNavDataList };
        _self._getCategoryBottomList("pop");
        _self._getCategoryBottomList("new");
        _self._getCategoryBottomList("sell");
      });
    },
    // 获取右侧下半部信息
    _getCategoryBottomList(type) {
      let _self = this;
      const miniWallkey = _self.leftNavArr[_self.leftCurrentIndex].miniWallkey;
      getCategoryBottomList(miniWallkey, type).then(res => {
        _self.leftNavDataList[_self.leftCurrentIndex].subControlList[
          type
        ] = res;
        _self.leftNavDataList = { ..._self.leftNavDataList };
      });
    },
    // 监听左侧导航子组件的方法
    handleLeftNav(index) {
      this._getCategoryTopImg(index);
    },
    // 监听tab-control组件发射出来的事件
    getIndex(index) {
      switch (index) {
        case 0:
          this.TabControlItem = "pop";
          break;
        case 1:
          this.TabControlItem = "sell";
          break;
        case 2:
          this.TabControlItem = "new";
          break;
      }
    }
  },
  created() {
    // 获取左侧导航数据
    this._getCategoryDate();
  }
};
</script>

<style scoped>
.ZLCategory {
  height: 100vh;
  overflow: hidden;
}
.topNav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--color-tint);
  color: #fff;
}
/* 内容 */
.cateContent {
  width: 100%;
  height: calc(100% - 44px - 49px);
  margin-top: 44px;
  background-color: #fff;
  display: flex;
}

/* 内容右侧 */
.contentRight {
  flex: 1;
  height: 100%;
  overflow: scroll;
}
</style>
